WebSocket详解（三）：深入WebSocket通信协议细节

1、前言

WebSocket 是HTML5一种新的web通信技术，它真正实现了浏览器与服务器的全双工实时通信(full-duplex)。本文将详解介绍WebSocket的通信协议细节。

你也可查看本文的上篇：《WebSocket详解（一）：初步认识WebSocket技术》、《WebSocket详解（二）：技术原理、代码演示和应用案例》。

2、系列文章

本文是系列文章中的第1篇，本系列文章的大纲如下：

• 《WebSocket详解（一）：初步认识WebSocket技术》
• 《WebSocket详解（二）：技术原理、代码演示和应用案例》
• 《WebSocket详解（三）：深入WebSocket通信协议细节》（* 本文）
• 《WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇)》
• 《WebSocket详解（五）：刨根问底HTTP与WebSocket的关系(下篇)》
• 《WebSocket详解（六）：刨根问底WebSocket与Socket的关系》
  

3、更多资料

Web端即时通讯新手入门贴：
《新手入门贴：详解Web端即时通讯技术的原理》

Web端即时通讯技术盘点请参见：
《Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE》

关于Ajax短轮询：
找这方面的资料没什么意义，除非忽悠客户，否则请考虑其它3种方案即可。

有关Comet技术的详细介绍请参见：
《Comet技术详解：基于HTTP长连接的Web端实时通信技术》
《WEB端即时通讯：HTTP长连接、长轮询（long polling）详解》
《WEB端即时通讯：不用WebSocket也一样能搞定消息的即时性》
《开源Comet服务器iComet：支持百万并发的Web端即时通讯方案》

更多WebSocket的详细介绍请参见：
《新手快速入门：WebSocket简明教程》
《理论联系实际：从零理解WebSocket的通信原理、协议格式、安全性》
《八问WebSocket协议：为你快速解答WebSocket热门疑问》
《Socket.IO介绍：支持WebSocket、用于WEB端的即时通讯的框架》
《socket.io和websocket 之间是什么关系？有什么区别？》
《Web端即时通讯实践干货：如何让你的WebSocket断网重连更快速？》

有关SSE的详细介绍文章请参见：
《SSE技术详解：一种全新的HTML5服务器推送事件技术》

更多WEB端即时通讯文章请见：
http://www.52im.net/forum.php?mod=collection&action=view&ctid=15

4、传统“长轮询”实现Web端即时通讯的问题

WebSocket出现之前，Web端为了实现即时通讯，所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。

而比较新的技术去做轮询的效果是Comet（是一种被hack出来的基于http长连接的“服务器推”技术，看看这篇文章可以对Comet技术有个直观的了解：《开源Comet服务器iComet：支持百万并发的Web端即时通讯方案》）。但这种技术虽然可达到全双工通信，依然需要发出请求。

5、WebSocket 技术概览

在 WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送，改变了原有的B/S模式。

WebSocket技术应用的典型架构：


WebSocket的技术原理：

（勘误：图片中的“updrade”应为“upgrade”。感谢8楼的坛友“kare”指正！）

浏览器端的websocket 发起的请求一般是：

// javacsript
  var ws = new WebSocket("ws://127.0.0.1:4000");
  ws.onopen = function(){
    console.log("succeed");
  };
  ws.onerror = function(){
    console.log(“error”);
  };
  ws.onmessage = function(e){
  console.log(e); 
  }

当 new 一个 websocket 对象之后，就会向服务器发送一个 get 请求：


这个请求是对某个服务器的端口发送的，一般的话，会预先在服务器将一个socket 绑定到一个端口上，客户端和服务器端在这个预定的端口上通信（我这里绑定的就是 4000 端口，默认情况下，websocke 使用 80 端口）。

然后，在服务器端的socket监听到这个packet 之后就生成一个新的 socket，将发送过来的数据中的 Sec-WebSocket-Key 解析出来，然后按照把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之后进行BASE-64编码，将结果作为“Sec-WebSocket-Accept”头的值，返回给客户端。

客户端收到这个之后，就会将 通信协议 upgrade 到 websocket 协议：


然后就会在这个持久的通道下进行通信，包括浏览器的询问，服务器的push，双方是在一个全双工的状态下相互通信。

6、WebSocket 通信协议

如上述的例子：切换后的websocket 协议中的 数据传输帧的格式(此时不再使用http协议) 官方文档给出的说明：


直接看这个，谁都会有点头大: 我画了一幅图来简单的解释这个 frame 的结构：


各字段的解释：

FIN              1bit 表示信息的最后一帧，flag，也就是标记符
RSV 1-3        1bit each 以后备用的 默认都为 0
Opcode         4bit 帧类型，
Mask              1bit 掩码，是否加密数据，默认必须置为1 
Payload len   7bit 数据的长度，当这个7 bit的数据 == 126 时，后面的2 个字节也是表示数     据长度，当它 == 127 时，后面的 8 个字节表示数据长度
Masking-key      1 or 4 bit 掩码
Payload data  playload len  bytes 数据

所以我们这里的代码，通过判断 Playload len的值，来用 substr 截取 Masking-key 和 PlayloadData。

根据掩码解析数据的方法是：

for( i = 0; i < data.length ; i++){
   orginalData += data[i ]  ^  maskingKey[i mod 4]; 
}

在PHP中，当我们收到数据之后，按照这里的格式截取数据，并将其按照这里的方法解析后就得到了浏览器发送过来的数据。 当我们想把数据发送给浏览器时，也要按照这个格式组装frame。 这里是我的方法：

function frame($s){
                  $a = str_split($s, 125);
                  if (count($a) == 1){
                          return "\x81" . chr(strlen($a[0])) . $a[0];
                  }
                  $ns = "";
                  foreach ($a as $o){
                          $ns .= "\x81" . chr(strlen($o)) . $o;
                  }
                  return $ns;
          }

强行将要发送的数据分割成 125 Byte / frame，这样 playload len 只需要 7 bits。也就是直接将数据的长度的ASCII 码拼接上去，然后后面跟上要发送的数据。 每一个 frame 前面加的 ‘\x81’ 用二进制就是： 1000 0001 1000 ：

1 是 FIN
000 是三个备用的bit

0001 指的是 opcode 官方的解释：

可以设置 opcode的值，来告诉浏览器这个frame的数据属性。

附录：更多Web端即时通讯文章汇总

《新手入门贴：史上最全Web端即时通讯技术原理详解》
《Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE》
《SSE技术详解：一种全新的HTML5服务器推送事件技术》
《Comet技术详解：基于HTTP长连接的Web端实时通信技术》
《新手快速入门：WebSocket简明教程》
《WebSocket详解（一）：初步认识WebSocket技术》
《WebSocket详解（二）：技术原理、代码演示和应用案例》
《WebSocket详解（三）：深入WebSocket通信协议细节》
《WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇)》
《WebSocket详解（五）：刨根问底HTTP与WebSocket的关系(下篇)》
《WebSocket详解（六）：刨根问底WebSocket与Socket的关系》
《socket.io实现消息推送的一点实践及思路》
《LinkedIn的Web端即时通讯实践：实现单机几十万条长连接》
《Web端即时通讯技术的发展与WebSocket、Socket.io的技术实践》
《Web端即时通讯安全：跨站点WebSocket劫持漏洞详解(含示例代码)》
《开源框架Pomelo实践：搭建Web端高性能分布式IM聊天服务器》
《使用WebSocket和SSE技术实现Web端消息推送》
《详解Web端通信方式的演进：从Ajax、JSONP 到 SSE、Websocket》
《MobileIMSDK-Web的网络层框架为何使用的是Socket.io而不是Netty？》
《理论联系实际：从零理解WebSocket的通信原理、协议格式、安全性》
《微信小程序中如何使用WebSocket实现长连接(含完整源码)》
《八问WebSocket协议：为你快速解答WebSocket热门疑问》
《IM跨平台技术学习(一)：快速了解新一代跨平台桌面技术——Electron》
《IM跨平台技术学习(二)：Electron初体验(快速开始、跨进程通信、打包、踩坑等)》
《IM跨平台技术学习(三)：vivo的Electron技术栈选型、全方位实践总结》
《IM跨平台技术学习(四)：蘑菇街基于Electron开发IM客户端的技术实践》
《IM跨平台技术学习(五)：融云基于Electron的IM跨平台SDK改造实践总结》
《IM跨平台技术学习(六)：网易云信基于Electron的IM消息全文检索技术实践》
《IM跨平台技术学习(七)：得物基于Electron开发客服IM桌面端的技术实践》
《一文读懂前端技术演进：盘点Web前端20年的技术变迁史》
《Web端即时通讯基础知识补课：一文搞懂跨域的所有问题！》
《Web端即时通讯实践干货：如何让你的WebSocket断网重连更快速？》
《WebSocket从入门到精通，半小时就够！》
《WebSocket硬核入门：200行代码，教你徒手撸一个WebSocket服务器》
《长连接网关技术专题(四)：爱奇艺WebSocket实时推送网关技术实践》
《网页端IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket》
《搞懂现代Web端即时通讯技术一文就够：WebSocket、socket.io、SSE》
>> 更多同类文章 ……

（原文链接：http://www.king-liu.net/?p=772）

如果WebSocket的浏览器兼容性能更好一点，加上WEB开发的低成本和简易性，那真是相当爽啊

很不错教程

受教了

受教了，对websocket有了清晰的认识

websocket会有丢包的情况吗，怎么处理

引用：可口可乐 发表于 2018-03-16 16:03
websocket会有丢包的情况吗，怎么处理

你把websocket看成tcp就好了

WebSocket的技术原理：
这里的图片里面 打错字了 upgrade 写成了 updrade 了

引用：kare 发表于 2018-10-19 10:55
WebSocket的技术原理：
这里的图片里面 打错字了 upgrade 写成了 updrade 了

很细心，非常感谢，我已经在图片下补充了勘误信息。

引用：JackJiang 发表于 2018-10-19 14:45
很细心，非常感谢，我已经在图片下补充了勘误信息。

都是在这里学到的东西，感谢这个网站。

引用：kare 发表于 2018-10-22 16:06
都是在这里学到的东西，感谢这个网站。

互相学习！

websocket 是http的升级，本质最后也会走到传输层 tcp

引用：尹少爷 发表于 2019-03-27 09:57
websocket 是http的升级，本质最后也会走到传输层 tcp

websocket只是借用http完成握手

原文：直接看这个，谁都会有点头大: 我花了一幅图，

错别字：花==》画

引用：楔子 发表于 2019-08-30 17:23
原文：直接看这个，谁都会有点头大: 我花了一幅图，

错别字：花==》画

多谢纠错，已修订！

继续好评+收藏。

发现了 4 处，请站长明察：
1，“浏览器和服务器只需要要做一个握手的动作”，多了一个 “要”；
2，“然后按照把“Sec-WebSocket-Ke”加上一个魔幻字符串”，
  （1）按照什么并没有说清楚。
  （2）“Sec-WebSocket-Ke” 少了一 “y” 字符。
3，“将结果做为“Sec-WebSocket-Accept”头的值” 中的 “做为” 改为 “作为”似乎更好。
4，“此时不再使用html协议” 中的 “html” 似乎应改为 “HTTP”。

“也就是直接将数据的长度的ascall码拼接上去” 中的 “ascall码” 似乎应改为 "ASCII 码"。

引用：gxl_ct001 发表于 2021-02-20 17:37
发现了 4 处，请站长明察：
1，“浏览器和服务器只需要要做一个握手的动作”，多了一个 “要”；
2，“然 ...

已修订，非常感谢！

引用：gxl_ct001 发表于 2021-02-20 17:48
“也就是直接将数据的长度的ascall码拼接上去” 中的 “ascall码” 似乎应改为 "ASCII 码"。

已修订，非常感谢！